<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易日历</title>
    <style>
        .calendar{
            width:360px;
        }
        .calendar li{
            display:inline-block;
            width:100px;
            height:100px;
            margin-bottom:10px;
            text-align:center;
            border:1px solid #ccc;
        }
        .active{
            background-color:green;
            color:#fff;
        }
    </style>
    <script>
        window.onload=function(){
         var arr=[
             '快过年了，大家可以商量着去哪玩吧~',
             '二月份干嘛',
             '三月份干嘛',
             '四月份干嘛',
             '五月份干嘛',
             '六月份干嘛',
             '七月份干嘛',
             '八月份干嘛',
             '九月份干嘛',
             '十月份干嘛',
             '十一月份干嘛',
             '十二月份干嘛',
         ];
         var oDiv=document.getElementById('tab');
         var aLi=oDiv.getElementsByTagName('li');
         var oTxt=oDiv.getElementsByTagName('div')[0];
         for(var i=0; i<aLi.length;i++){
           aLi[i].index=i;//
           aLi[i].onmouseover=function(){
               for(var i=0;i<aLi.length;i++){
                  aLi[i].className='';
               }
             this.className='active';
             oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';//更改div的内部值

           };
         }

        };
    </script>
</head>
<body>
 <div id="tab" class="calendar">
     <ul>
         <li class="active"><h2>1</h2><p>JAN</p></li>
         <li><h2>2</h2><p>FER</p></li>
         <li><h2>3</h2><p>MAR</p></li>
         <li><h2>4</h2><p>APR</p></li>
         <li><h2>5</h2><p>MAY</p></li>
         <li><h2>6</h2><p>JUN</p></li>
         <li><h2>7</h2><p>JUL</p></li>
         <li><h2>8</h2><p>AUG</p></li>
         <li><h2>9</h2><p>SEP</p></li>
         <li><h2>10</h2><p>OCT</p></li>
         <li><h2>11</h2><p>NOV</p></li>
         <li><h2>12</h2><p>DEC</p></li>
     </ul>
     <div class="text">
         <h2>1月活动</h2>
         <p>快过年了，大家可以商量着去哪玩吧~</p>
     </div>
 </div>
</body>
</html>
<!--鼠标移入onmouseover-->
<!--鼠标移出onmouseout-->